<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="author" content="wjc">
    <title>全选与全不选</title>
    <style>
        body{
            font-size: 14px;
        }
        dl,dt,dd,p{
            margin: 0;
        }
        dl{
            width: 120px;
            margin: 0 auto;
            border: 1px solid black;
            border-radius: 5px;
            padding: 10px;
            background-color: #fafafa;
        }
        dt{
            border-bottom: 1px solid black;
            padding-bottom: 10px;
        }
        lable{
            padding-left: 5px;
            padding-right: 10px;
        }
        a{
            text-decoration: none;
        }
        a:hover{
            color: red;
        }
        p{
            margin-top: 10px;
        }
    </style>
</head>
<body>
    <dl>
        <dt><input type="checkbox"><label>全选</label><a href="javascript:;">反选</a></dt>
        <dd>
            <!--(p>input[type=checkbox]+label{选项$})*10-->
            <p><input type="checkbox"><label for="">选项1</label></p>
            <p><input type="checkbox"><label for="">选项2</label></p>
            <p><input type="checkbox"><label for="">选项3</label></p>
            <p><input type="checkbox"><label for="">选项4</label></p>
            <p><input type="checkbox"><label for="">选项5</label></p>
            <p><input type="checkbox"><label for="">选项6</label></p>
            <p><input type="checkbox"><label for="">选项7</label></p>
            <p><input type="checkbox"><label for="">选项8</label></p>
            <p><input type="checkbox"><label for="">选项9</label></p>
            <p><input type="checkbox"><label for="">选项10</label></p>  
        </dd>
    </dl>
</body>
<html>
<script>
    var a=document.querySelector('a')
    var label=document.querySelector('label')
    var inputs=document.querySelectorAll('input')

    // 判断选中的个数并改变全选/全不选的文字内容
    function isCheckedAll(){
        var n=0
          for(var i=1;i<inputs.length;i++){

              if(inputs[i].checked==true){
                //   当复选框被选中时，在这里记录复选框被选中的个数
                n ++
                // console.log(n)
              }
            //   如果所有的选项都被选中，label文字发生变化，全选按钮也被选中
            inputs[0].checked= n==inputs.length-1; //n==10的时候
            // if(n ==inputs.length-1){
            //     inputs[0].checked=true;
            // }else{
            //     inputs[0].checked=false;
            // }
            label.innerHTML= inputs[0].checked? '全不选':'全选'
          }
    }



    // 实现全选和全不选的效果
    inputs[0].onclick=function(){
        for(var i=1;i<inputs.length;i++){
            inputs[i].checked=this.checked;
        }
        isCheckedAll()
    }
    // 反选
    a.onclick =function(){
        for(var i=1;i<inputs.length;i++){
            // 反选就是对自身状态进行取反
            inputs[i].checked=!inputs[i].checked;
        }
        isCheckedAll()
    }

    // 实时检测状态，检测全选按钮是否需要改变状态
    for(var i=1;i<inputs.length;i++){
        inputs[i].onclick=function(){
            isCheckedAll()
        }
    }
</script>